|
1
|
|
|
import React from 'react'; |
|
2
|
|
|
import { Link } from 'react-router-dom'; |
|
3
|
|
|
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'; |
|
4
|
|
|
import PropTypes from 'prop-types'; |
|
5
|
|
|
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination'; |
|
6
|
|
|
|
|
7
|
2 |
|
const propTypes = { |
|
8
|
|
|
serverId: PropTypes.string.isRequired, |
|
9
|
|
|
paginator: PropTypes.shape({ |
|
10
|
|
|
currentPage: PropTypes.number, |
|
11
|
|
|
pagesCount: PropTypes.number, |
|
12
|
|
|
}), |
|
13
|
|
|
}; |
|
14
|
|
|
|
|
15
|
2 |
|
const Paginator = ({ paginator = {}, serverId }) => { |
|
16
|
2 |
|
const { currentPage, pagesCount = 0 } = paginator; |
|
17
|
|
|
|
|
18
|
2 |
|
if (pagesCount <= 1) { |
|
19
|
1 |
|
return null; |
|
20
|
|
|
} |
|
21
|
|
|
|
|
22
|
1 |
|
const renderPages = () => |
|
23
|
1 |
|
progressivePagination(currentPage, pagesCount).map((pageNumber, index) => ( |
|
24
|
5 |
|
<PaginationItem |
|
25
|
|
|
key={keyForPage(pageNumber, index)} |
|
26
|
|
|
disabled={isPageDisabled(pageNumber)} |
|
27
|
|
|
active={currentPage === pageNumber} |
|
28
|
|
|
> |
|
29
|
|
|
<PaginationLink |
|
30
|
|
|
tag={Link} |
|
31
|
|
|
to={`/server/${serverId}/list-short-urls/${pageNumber}`} |
|
32
|
|
|
> |
|
33
|
|
|
{pageNumber} |
|
34
|
|
|
</PaginationLink> |
|
35
|
|
|
</PaginationItem> |
|
36
|
|
|
)); |
|
37
|
|
|
|
|
38
|
1 |
|
return ( |
|
39
|
|
|
<Pagination listClassName="flex-wrap justify-content-center"> |
|
40
|
|
|
<PaginationItem disabled={currentPage === 1}> |
|
41
|
|
|
<PaginationLink |
|
42
|
|
|
previous |
|
43
|
|
|
tag={Link} |
|
44
|
|
|
to={`/server/${serverId}/list-short-urls/${currentPage - 1}`} |
|
45
|
|
|
/> |
|
46
|
|
|
</PaginationItem> |
|
47
|
|
|
{renderPages()} |
|
48
|
|
|
<PaginationItem disabled={currentPage >= pagesCount}> |
|
49
|
|
|
<PaginationLink |
|
50
|
|
|
next |
|
51
|
|
|
tag={Link} |
|
52
|
|
|
to={`/server/${serverId}/list-short-urls/${currentPage + 1}`} |
|
53
|
|
|
/> |
|
54
|
|
|
</PaginationItem> |
|
55
|
|
|
</Pagination> |
|
56
|
|
|
); |
|
57
|
|
|
}; |
|
58
|
|
|
|
|
59
|
2 |
|
Paginator.propTypes = propTypes; |
|
60
|
|
|
|
|
61
|
|
|
export default Paginator; |
|
62
|
|
|
|
shlinkio /
shlink-web-client
